<template>
 <div>
    <!-- 三级选择框展示 -->
    <el-card class="box-card" style="margin: 20px 0px;">
        <categorySelect :isshow="!showTable" @getCategoryId="getAttrList"/>
    </el-card>

   
    <el-card class="box-card">
         <!-- 商品属性展示 -->
        <div v-show="showTable">
           <el-button type="primary" icon="el-icon-plus" :disabled="!id3" @click="addAttr">添加属性</el-button>
           <el-table style="width: 100%" :data="list" border>
             <el-table-column label="序号" type="index" align="center"></el-table-column>
             <el-table-column label="属性名称" prop="attrName" width="150px"></el-table-column>
             <el-table-column label="属性值">
               <template scope="{row}">
                   <el-tag type="success" v-for="tag in row.attrValueList" :key="tag.id" style="margin: 0px 20px;">{{tag.valueName}}</el-tag>
               </template>
             </el-table-column>
             <el-table-column label="操作">
               <template scope="{row}">
                   <el-button type="warning" size="mini" icon="el-icon-edit" @click="updateAttr(row)">修改</el-button>
                   <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
           </div>

        <!-- 展示添加属性 -->
        <div v-show="!showTable">

            <el-form :inline="true" ref="form" label-width="80px">
              <el-form-item  label="属性名" :model="attrInfo">
                <el-input placeholder="请输入属性名" v-model="attrInfo.attrName"></el-input>
              </el-form-item>
            </el-form>

            <el-button type="primary" icon="el-icon-plus"  @click="addAttrValue" :disabled="!attrInfo.attrName">添加属性值</el-button>
            <el-button @click="showTable=true">取消</el-button>

            <el-table :data="attrInfo.attrValueList" border>
              <el-table-column label="序号" type="index" align="center"></el-table-column>
              <el-table-column label="属性值名称">
                <template scope="{row,$index}">
                  <el-input :ref="$index" v-model="row.valueName" placeholder="请输入属性值" size="mini" v-if="row.flag"
                   @blur="inputLook(row,$index)" @keyup.native.enter="inputLook(row)"></el-input>
                  <span v-else @click="cliSpan(row,$index)" style="display: block;">{{ row.valueName}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80px">
                <template scope="{row,$index}">
                  <el-popconfirm :title="`确定删除${row.valueName}？`" @onConfirm="sureDelete($index)">
                    <el-button slot="reference" type="danger" size="mini"
                     icon="el-icon-delete"></el-button>
                  </el-popconfirm>
                  
                </template>
              </el-table-column>
            </el-table>

            <el-button type="primary" @click="save" :disabled="attrInfo.attrValueList.length<1">保存</el-button>
            <el-button @click="showTable=true">取消</el-button>
        </div>
    </el-card>

 </div>
</template>

<script>
import cloneDeep from "lodash/cloneDeep"
export default {
    name: 'attr',
    data(){
        return {
            id1:'',
            id2:'',
            id3:'',
            // 表格展示的数据
            list:[],
            showTable:false,
            attrInfo:{
               attrName: "",
               attrValueList: [],
               categoryId: 0,
               categoryLevel: 3,
            },
        } 
    },
    methods:{
        async getAttrList(ids){
            let {id1,id2,id3}=ids;
            this.id1=id1;
            this.id2=id2;
            this.id3=id3;
            let result=await this.$tradeAPI.attr.reqGetAttrList(id1,id2,id3);
            if(result.code==200){
                this.list=result.data
            }
        },

        addAttrValue(){
          this.showTable=false;
          this.attrInfo.attrValueList.push({
            attrId:this.attrInfo.id,
            valueName:'',
            flag:true
          });
          this.$nextTick(()=>{
            this.$refs[this.attrInfo.attrValueList.length-1].focus()
          })
          
        },

        addAttr(){
          this.showTable=false;
          this.attrInfo={
               attrName: "",
               attrValueList: [],
               categoryId: this.id3,
               categoryLevel: 3,
            }
        },

        updateAttr(row){
          this.showTable=false;
          this.attrInfo=cloneDeep(row);
          this.attrInfo.attrValueList.forEach(element => {
            this.$set(element,"flag",false)
          });
        },

        inputLook(row){
          if(row.valueName.trim()==''){
            this.$message({type: 'warning',message:"请输入正确的属性值"})
            return ;
          };
          let repeat=this.attrInfo.attrValueList.some((item)=>{
            if(item!==row){
              return item.valueName==row.valueName
            }
          });
          if(repeat) return;
          row.flag=false
        },

        cliSpan(row,index){
          row.flag=true;
          this.$nextTick(()=>{
            this.$refs[index].focus();
          })
        },

        sureDelete(index){
          this.attrInfo.attrValueList.splice(index,1)
        },

        async save(){
          this.attrInfo.attrValueList=this.attrInfo.attrValueList.filter((item)=>{
            delete item.flag
            return item.valueName!=''
          })
          let result=await this.$tradeAPI.attr.reqAddAttrList(this.attrInfo);
          if(result.code==200){
            this.$message({
              type:'success',
              message:"保存成功"
            });
            this.showTable=true;
            this.getAttrList()
          }
        }

    }
  


}
</script>

<style>

</style>
